import React, { Component } from 'react';
import {QiniuMulti,DateInput} from '../common/Forminput';
import {browserHistory,hashHistory,Link} from 'react-router';
import { connect } from 'react-redux';
import { TransportUpdate } from '../../Redux/Actions/transportAction';
import { QiniuUptokenGet } from '../../Redux/Actions/qiniuAction';
import SweetAlert from 'react-bootstrap-sweetalert';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class Transport extends Component {
  constructor(props){
    super(props)
    this.state = {
      alertstate: "tohide",
      files: [],
      transportId:props.transportReducer.transport.data.id,
      orderId:props.transportReducer.transport.data.orderId,
      profileId:props.transportReducer.transport.data.userId,
      oceanBillOfLadingDate:props.transportReducer.transport.data.oceanBillOfLadingDate==null?"":props.transportReducer.transport.data.oceanBillOfLadingDate,
      oceanBillOfLadingUrl:props.transportReducer.transport.data.oceanBillOfLadingUrl==null?"":props.transportReducer.transport.data.oceanBillOfLadingUrl,
      vanningDate:props.transportReducer.transport.data.vanningDate==null?"":props.transportReducer.transport.data.vanningDate,
      vanningUrl:props.transportReducer.transport.data.vanningUrl==null?"":props.transportReducer.transport.data.vanningUrl,
      sailingDate:props.transportReducer.transport.data.sailingDate==null?"":props.transportReducer.transport.data.sailingDate,
      arrivalDate:props.transportReducer.transport.data.arrivalDate==null?"":props.transportReducer.transport.data.arrivalDate
    }
    this.pushTidan = (event)=>{
        event.preventDefault(); 
        const token = this.props.authReducer.user.data.token;
        const opt =this.state
        for(let i in opt){
            if(opt[i]==null){
                opt[i] = "";
            }
            if(typeof opt[i] == "object"){
                opt[i] = opt[i].join(",")
            }
        }
        this.props.dispatch(TransportUpdate(token,opt));
        this.setState({
            alertstate:"toshow"
        })
    }
  }

  componentWillMount(){
    this.props.dispatch(QiniuUptokenGet(this.props.authReducer.user.data.token));
  }

  getPhotoUrl(name,photoUrl){
        //console.log(name,photoUrl)
        this.setState({
            [name]:photoUrl
        })
    }

  backtime(time,name){
    this.setState({
      [name]: time
    })
  }

  render() {
    const token  = this.props.qiniuReducer.qiniu.data?this.props.qiniuReducer.qiniu.data:{token:""};
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
            <div className="row">
                <ol className="breadcrumb">
                <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                <li>运输编辑</li>
                </ol>
            </div>
            <div className="row">
                <div className="col-lg-12">
                  <div className="panel panel-default">
                      <div className="panel-heading">
                          运输编辑
                          <Link type="button" className="pull-right btn btn-primary" style={{marginRight: "6px"}} to={{pathname:"/main/transport",state:{profileId:this.state.profileId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}}}>
                            详情
                          </Link>
                      </div>
                      <div className="panel-body">
                          <div className="form-horizontal">
                            <DateInput label="提单时间" name="oceanBillOfLadingDate" value={this.state.oceanBillOfLadingDate} backParent={this.backtime.bind(this)} tips="" />
                            <QiniuMulti src={this.state.oceanBillOfLadingUrl} label="提单照片" info="请上传付款提单照片，最多上传2张。" token={token.token} limitNum={2} callbackParent={this.getPhotoUrl.bind(this,"oceanBillOfLadingUrl")}/>
                            <DateInput label="装箱时间" name="vanningDate" value={this.state.vanningDate} backParent={this.backtime.bind(this)} tips="" />
                            <QiniuMulti src={this.state.vanningUrl} label="装箱照片" info="请上传装箱照片，最多上传2张。" token={token.token} limitNum={2} callbackParent={this.getPhotoUrl.bind(this,"vanningUrl")}/>
                            <DateInput label="发船日期" name="sailingDate" value={this.state.sailingDate} backParent={this.backtime.bind(this)} tips="" />
                            <DateInput label="到港日期" name="arrivalDate" value={this.state.arrivalDate} backParent={this.backtime.bind(this)} tips="" />
                            <div className="col-sm-8" style={{textAlign: "center"}}>
                                <button type="button" className="btn btn-primary" style={{marginRight: "15px"}} onClick={this.pushTidan}>
                                  上传
                                </button>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div  id="alertwrap" className={this.state.alertstate}>
                    <SweetAlert
                    info
                    confirmBtnText="确定"
                    confirmBtnBsStyle="primary"
                    title="运输信息已提交。"
                    onConfirm={()=>{this.setState({alertstate:"tohide"});history.push({pathname:"/main/transport",state:{profileId:this.state.profileId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}})}}
                    >
                    </SweetAlert>
                </div>
                </div>
            </div>	
        </div>
    )
  }
}

export default connect((state) => {
    const { authReducer,transportReducer,qiniuReducer } = state;
    return {
        authReducer,transportReducer,qiniuReducer
    }
})(Transport);